import './SetCharts.scss'
import { useRequest } from 'alova/client'
import { Select, Button, App } from 'antd'
import { useState, lazy, Suspense } from 'react'
import { useEventEmitter, useMount } from 'ahooks'
import { SaveOutlined, PlusOutlined, CloudDownloadOutlined } from '@ant-design/icons'

import { Http } from '../Utils/Api'
import { modelStore } from '../Config/zustand'

const ChartsType = [
    { value: 'SetChartsA01', label: '折现、面积、柱形、条形' },
    { value: 'SetChartsA02', label: '饼图、环图、玫瑰图、雷达图' },
    { value: 'SetChartsA03', label: '仪表图' },
    { value: 'SetChartsA04', label: '进度图' },
    { value: 'SetChartsA05', label: '水波图' },
    { value: 'SetChartsA06', label: '三维线图、面积图' },
    { value: 'SetChartsA07', label: '三维饼图' },



    // { value: 'SetChartsA09', label: '三维柱图' },
    // { value: 'SetChartsA06', label: '日历图' },
]

const ChartsTypeMapping = {
    bar: 'SetChartsA01',
    area: 'SetChartsA01',
    line: 'SetChartsA01',
    pie: 'SetChartsA02',
    rose: 'SetChartsA02',
    radar: 'SetChartsA02',
    gauge: 'SetChartsA03',
    linearProgress: 'SetChartsA04',
    circularProgress: 'SetChartsA04',
    liquid: 'SetChartsA05',
    line3D: 'SetChartsA06',
    area3D: 'SetChartsA06',
    pie3d: 'SetChartsA07'
}

const SetCharts = () => {
    const { updateModel } = modelStore()
    const { notification } = App.useApp()
    const [Active, setActive] = useState(0)
    const [Template, setTetmplate] = useState()
    const [TypeSelect, setTypeSelect] = useState()

    const [LoadConfig, setLoadConfig] = useState([])
    const [ChartsField, setChartsField] = useState()
    const [ChartsStyle, setChartsStyle] = useState()

    const { send } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })

    const CallBackEvent = useEventEmitter()
    CallBackEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'setConfig') {
            const { SimulateData, ChartsStyle } = data
            const config = { ChartsField: SimulateData, ChartsStyle }
            // console.log('获取图表配置', SimulateData, ChartsStyle)
            if (Active === 0) {
                console.log(config)
                // updateModel({ title: '确认名称', modalType: 'model', type: 'Additional', width: 600, data: { type: 'SaveChartsConfig', init: config } })
            } else {
                send({ url: 'posJSONData', params: { uuid: `ChartStyle/${TypeSelect}`, Content: JSON.stringify(config) } }).then(() => {
                    notification.success({ key: 'fromModify', message: '操作成功', description: '图例已更新!' })
                })
            }
        }
    })

    const onSave = () => CallBackEvent.emit({ type: 'getConfig' })

    const onChartsSelect = (e) => {
        if (e) {
            if (Active === 0) {
                const temp = lazy(() => import(`./page/${e}.jsx`))
                setChartsField()
                setChartsStyle()
                setTetmplate(temp)
                setTypeSelect(e)
            } else {
                send({ url: 'getJSONData', params: { uuid: `ChartStyle/${e}` } }).then(res => {
                    const { ChartsField, ChartsStyle } = res
                    const { type } = ChartsStyle
                    setChartsField(ChartsField)
                    setChartsStyle(ChartsStyle)
                    const temp = lazy(() => import(`./page/${ChartsTypeMapping[type]}.jsx`))
                    setTetmplate(temp)
                    setTypeSelect(e)
                })
            }
        } else {
            setTypeSelect()
            setTetmplate()
        }
    }

    useMount(() => {
        send({ url: 'getJSONList', params: { filePath: 'ChartStyle' } }).then(res => {
            setLoadConfig(res.data.map(item => ({ value: item.fileName.split('.')[0], label: item.fileName.split('.')[0] })))
        })
    })

    const onSwitchType = (e) => {
        setActive(e)
        onChartsSelect()
    }
    return (
        <div className='SetCharts'>

            <div className='SetCharts__TopSelect'>
                <Select variant="filled" placeholder='请选择' value={TypeSelect} options={Active === 0 ? ChartsType : LoadConfig} onChange={e => onChartsSelect(e)} />

                <Button onClick={() => onSwitchType(0)} type={Active === 0 ? 'primary' : ''} icon={<PlusOutlined />}>新增配置</Button>
                <Button onClick={() => onSwitchType(1)} type={Active === 1 ? 'primary' : ''} icon={<CloudDownloadOutlined />}>载入配置</Button>
                <Button onClick={onSave} icon={<SaveOutlined />} type="primary" style={{ marginLeft: 16 }}>保存设置</Button>
            </div>
            <div className='SetCharts__Box'>
                <Suspense>
                    {Template && <Template field={ChartsField} style={ChartsStyle} CallBackEvent={CallBackEvent} />}
                </Suspense>
            </div>

        </div>
    );
};

export default SetCharts;